<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue.js"></script>

</head>
<body>
  <div id="app">
    <!-- v-bind绑定style属性,值是一个对象 -->
    <div :style="styleobj">box1</div>
    <!-- v-bind绑定style属性,值是一个数组,数组中是样式对象,对象可以有多个 -->
    <div :style="styleArr">box2</div>
    <!-- v-bind绑定style属性可以和原生style属性共存 -->
    <div style="width:100px;height:100px" :style="styleArr1">box3</div>
    <!-- 可以把style属性对象的值作为数据保存在data中 -->
    <div style="width:100px;height:100px" :style="{background:background}">box3</div>
    
  </div>
  <script>
    Vue.config.productionTip = false
    const vm = new Vue({
      el:"#app",
      data(){
        return {
          msg:"hello vue",
          styleobj:{
            width:'100px',
            height:'100px',
            background:'red'
          },
          styleArr:[
            {width:'100px'},
            {height:'100px'},
            {background:'pink'}
          ],
          styleArr1:[
            {background:'yellow'}
          ],
          background:'gray'

        }
      }
    })
    </script>
</body>
</html>